<template>
	<view class="certmain">
		<uni-nav-bar shadow title="证书查询" @clickLeft="$wanlshop.back(1)" left-icon="left" height="88rpx" :border="false" :fixed="true" backgroundColor="#FFFFFF"
			:shadow="false"></uni-nav-bar>
		<view class="cerbtn">
			<button type="default" @click="cx">证书查询</button>
		</view>
		<view class="cerxipt">
			<uni-forms class="forms" ref="form" :modelValue="formValue" :rules="rules">
				<uni-forms-item label="姓名:" name="username">
					<uni-easyinput type="text" v-model="formValue.username" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="身份证号：" name="idcard">
					<!-- multiple y有这个属性是多选 没有单选 -->
					<uni-easyinput type="text" v-model="formValue.idcard" placeholder="请输入身份证号" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- <view class="cersipt">
			<text>身份证号：</text><input style="margin-left: 2rpx;" type="text" value="" v-model="idcard" />
		</view> -->
		<view class=" cerbtns">
			<button type="default" @click="cx">查询</button>
		</view>
		<view class="certifList">
			<view class="listBox" v-for="(i,n) in ExamList">
				<!-- 	<view class="line">
				</view> -->
				<view class="listCon">
					<text class="tit">{{i.name}}</text>
					<view class="listRight">{{i.createtime}}</text><button class=""
							style="margin-left: 10rpx;"
							@click="$wanlshop.on('/pages/teacher/certificateMain?id='+i.id+'&name='+formValue.username+'&noid='+formValue.idcard)"
							type="default">查看证书</button>
					</view>
				</view>
				
			</view>

			<view v-if="ExamList.length==0&&searchs" class="noResult">
				无结果
			</view>
		</view>
		<view class="cerphoto">
			<!-- <image :src="" mode=""></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				certList: [],
				formValue: {
					username: '',
					idcard: '',

				},
				ExamList:[],
				catesLst:[],
				searchs: false,
				rules: {
					// username: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入姓名',
					// 		},
					// 		{
					// 			minLength: 3,
					// 			maxLength: 5,
					// 			errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
					// 		}
					// 	]
					// },
					// idcard: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入身份证号',
					// 		},
					// 		{
					// 			minLength: 18,
					// 			maxLength: 18,
					// 			errorMessage: '身份证号长度在 {minLength} 到 {maxLength} 个字符',
					// 		}
					// 	]
					// },
				}
			}
		},
		onReady() {

		},
		methods: {
			cx() {
				// let param = {
				// 	name: this.formValue.username.trim(),
				// 	id_no: this.formValue.idcard.trim()
				// };

				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title:'加载中'
					})
					this.$api.get({
						url: '/cert/certList',
						data: {
							name: this.formValue.username.trim(),
							id_no: this.formValue.idcard.trim()
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							console.log(res)
							this.searchs = true
							this.ExamList = res
							uni.hideLoading()
							// res.forEach((item, index) => {
							// this.getZsList(item.id,index)
							// })
							
						// setTimeout(()=>{
						// 	this.catesLst = this.certList
						// 	uni.hideLoading()
						// },400)
						
						},
						fail: error => {
							console.log(error)
						}
					})
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			getZsList(id,index) {
				this.$api.post({
					url: '/cert/getCertInfo',
					data: {
						name: this.formValue.username.trim(),
						id_no: this.formValue.idcard.trim(),
						exam_bank_cate_id: id
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
							this.certList[index] = res
					},
					fail: error => {
						console.log(error)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.certmain {
		height: 100vh;
		width: 100%;
		background-color: #FFFFFF;

		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}

		.cerbtn {
			width: 690rpx;
			height: 70rpx;
			background: #F5F5F5;
			line-height: 70rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			padding: 8rpx;

			button {
				margin: 0;
				width: 178rpx;
				height: 54rpx;
				font-size: 32rpx;
				display: block;
				line-height: 54rpx;
				background-color: #1387FE;
				color: #FFFCFC;
				padding: 0;
				border-radius: 4rpx;
			}
		}

		.cerbtns {
			button {
				width: 220rpx;
				height: 66rpx;
				background: #1387FE;
				border-radius: 10px 10px 10px 10px;
				font-size: 28rpx;
				display: block;
				line-height: 66rpx;
				background-color: #1387FE;
				color: #FFFCFC;
				padding: 0;
				border-radius: 4rpx;
				margin: 60rpx auto 84rpx;
			}
		}

		.cerxipt,
		.cersipt {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0 30rpx;
			margin-top: 40rpx;
			font-size: 26rpx;
			color: #333333;
			font-family: PingFang-SC-Medium;

			input {
				border: 1px solid #878787;
				width: 549rpx;
				height: 50rpx;
				font-size: 26rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			.forms {
				width: 100%;
			}
		}

		.certifList {
			width: 100%;
			padding: 0 30rpx;

			.listBox {
				position: relative;
				background: transparent;
				width: 100%;
				height: 37rpx;
				margin-bottom: 27rpx;

				.line {
					position: absolute;
					border: 1rpx dashed #999999;
					width: 100%;
					height: 1rpx;
					top: 50%;
					// 	margin-top: 0.5rpx;
				}

				.listCon {
					width: 100%;
					height: 37rpx;
					display: flex;
					justify-content: space-between;
					position: absolute;

					.tit {
						// width: 104rpx;
						height: 37rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 37rpx;
						background-color: #FFFFFF;
						// 	-webkit-background-clip: text;
						// 	-webkit-text-fill-color: transparent;
					}

					.listRight {
						display: flex;
						justify-content: space-between;
						background-color: #FFFFFF;
						padding-left: 20rpx;

						.date {
							margin-right: 33rpx;
							width: 139rpx;
							height: 33rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							line-height: 33rpx;
						}

						button {
							width: 108rpx;
							height: 38rpx;
							background: #F70000;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 24rpx;
							font-weight: normal;
							color: #FFFCFC;
							line-height: 38rpx;
						}
					}

				}
			}
		}

		.cerphoto {
			width: 686rpx;
			height: 471rpx;
			// background-color: pink;
			margin: 40rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.noResult {
		text-align: center;
	}
</style>
